<template>
  <div class="main">
    <div class="m-left">
      <div class="logo">
        <a href="">
          <div class="left">
            <img
              src="~@/assets/img/imgl2.png"
              alt=""
            >
          </div>
          <div class="right">
            <div class="tit">青少年健康管理</div>
          </div>
        </a>
      </div>
      <div class="nav">
        <ul>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i1" />总览</a>
          </li>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i2" />学生个人信息</a>
          </li>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i3" />健康指导方案</a>
          </li>
          <li class="on">
            <a
              href=""
              class="v1"
            ><i class="i4" />健康数据统计</a>
          </li>
          <li>
            <a
              href=""
              class="v1"
            ><i class="i5" />健康预警反馈</a>
          </li>
        </ul>
      </div>
      <div class="tel">
        <a href="">
          <img
            src="~@/assets/img/iconl6.png"
            alt=""
          >
        </a>
      </div>
    </div>
    <div class="m-contant">
      <div class="left l1">
        <div class="m-proposall">
          <h3 class="g-titl3">
            本周目标
          </h3>
          <ul class="ul-listl8">
            <li>
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动项目（跳绳）
                  </div>
                  <div class="num">
                    平均每次150个
                  </div>
                  <div class="num">
                    最高一次200个
                  </div>
                </div>
              </div>
            </li>
            <li class="blue">
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动时长（100分钟）
                  </div>
                  <div class="num">
                    已完成65分钟，完成率65%
                  </div>
                </div>
              </div>
            </li>
            <li class="orange">
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动频次（16次）
                  </div>
                  <div class="num">
                    已完成10次，完成率62.5%
                  </div>
                </div>
              </div>
            </li>
            <li class="pink">
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动强度（80次/分钟，共100分钟）
                  </div>
                  <div class="num">
                    已完成58分钟，完成率58%
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="m-constitutionl l1">
          <div class="m-chart2">
            <h3 class="g-titl3">
              本周最高心率和平均心率
            </h3>
            <div
              id="chart1"
              class="chart1"
            />
          </div>
        </div>
        <div class="m-proposall">
          <br>
          <h3 class="g-titl3">
            <span style="float:left">
              当前运动处方
            </span>
            <span style="float:right">
              当前运动处方状态（锻炼中，距离结束还有5天）
            </span>
          </h3>
          <ul class="ul-listl8">
            <li>
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动项目（跳绳）
                  </div>
                  <div class="num">
                    平均每次150个
                  </div>
                  <div class="num">
                    最高一次200个
                  </div>
                </div>
              </div>
            </li>
            <li class="blue">
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动时长（700分钟）
                  </div>
                  <div class="num">
                    已完成500分钟，完成率65%
                  </div>
                </div>
              </div>
            </li>
            <li class="orange">
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动频次（16次）
                  </div>
                  <div class="num">
                    已完成10次，完成率62.5%
                  </div>
                </div>
              </div>
            </li>
            <li class="pink">
              <div class="con">
                <div class="rr">
                  <div class="tit">
                    运动强度（80次/分钟，共100分钟）
                  </div>
                  <div class="num">
                    已完成58分钟，完成率58%
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="m-constitutionl l1">
          <div class="m-chart2">
            <h3 class="g-titl3">
              运动强度
            </h3>
            <div
              id="chart2"
              class="chart1"
            />
          </div>
          <div class="m-chart2 last">
            <h3 class="g-titl3">
              运动时长
            </h3>
            <div
              id="chart3"
              class="chart1"
            />
          </div>
        </div>
        <div class="m-constitutionl l1">
          <br>
          <h3 class="g-titl3">
            今日运动信息
          </h3>
          <div class="m-chart2">
            <div>
              <el-table
                v-loading="dataListLoading"
                :data="dataList"
                border
                header-row-style="font-size:14px;color: #000;"
                :header-cell-style="{background:'#4dbdae',color:'#595959'}"
                style="font-size:14px;width: 100%;"
              >
                <el-table-column
                  prop="addressBaseRent"
                  header-align="center"
                  align="center"
                  label="序号"
                />
                <el-table-column
                  prop="roomNo"
                  header-align="center"
                  align="center"
                  label="运动项目"
                />
                <el-table-column
                  prop="year"
                  header-align="center"
                  align="center"
                  label="运动时长"
                />
                <el-table-column
                  prop="rentManageBaseRentPay"
                  header-align="center"
                  align="center"
                  label="运动强度"
                />
                <el-table-column
                  prop="rentManageBaseRentPay"
                  header-align="center"
                  align="center"
                  label="运动时间"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="m-information">
          <a
            href=""
            class="close"
          />
          <a
            href=""
            class="more"
          />
          <div class="information">
            <div class="box">
              <div class="pic">
                <img
                  src="~@/assets/img/imgl7.png"
                  alt=""
                >
              </div>
            </div>
            <div class="txt">
              <h3 class="tit">
                李艾萌
              </h3>
              <div class="info">
                江苏路第五小学
              </div>
            </div>
          </div>
          <div class="m-events">
            <div class="g-tit">
              <h3 class="tit">
                新项目
              </h3>
              <a
                href=""
                class="btn qm"
              ><em>+</em>增加</a>
            </div>
            <ul class="ul-listl3">
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl17.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">坐位体前屈</h3>
                    <div class="date">May 5 - 11:00 AM</div>
                    <div class="info">USA,Houston</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
              <li>
                <a
                  href=""
                  class="con"
                >
                  <div class="pic">
                    <img
                      src="~@/assets/img/iconl18.png"
                      alt=""
                    >
                  </div>
                  <div class="txt">
                    <h3 class="tit">立正跳远</h3>
                    <div class="date">May 27 - 9:00 AM</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="m-notifications">
            <div class="g-tit">
              <h3 class="tit">
                新消息
              </h3>
            </div>
            <ul class="ul-listl4">
              <li>
                <div class="con">
                  <a
                    href=""
                    class="sclose"
                  />
                  <h3 class="tit">
                    <a href="">今日高强度运动时间少于60分钟</a>
                  </h3>
                </div>
              </li>
              <li>
                <div class="con">
                  <a
                    href=""
                    class="sclose"
                  />
                  <h3 class="tit">
                    <a href="">今日高强度运动时间少于60分钟</a>
                  </h3>
                </div>
              </li>
              <li>
                <div class="con">
                  <a
                    href=""
                    class="sclose"
                  />
                  <h3 class="tit">
                    <a href="">今日高强度运动时间少于60分钟</a>
                  </h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/scss/stu2.scss'
import echarts from 'echarts'
import $ from 'jquery'
// import UpdatePassword from '@/views/main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
import { createChart, createPieChart, createRateChart, createFunnelChart } from '@/utils/indexChart'
export default {
  // components: {
  //   UpdatePassword
  // },
  data() {
    return {
      pageLoading: false,
      updatePassowrdVisible: false,
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null
    }
  },
  computed: {
    userId: {
      get() { return this.$store.state.user.id },
      set(val) { this.$store.commit('user/updateId', val) }
    },
    userName: {
      get() { return this.$store.state.user.name },
      set(val) { this.$store.commit('user/updateName', val) }
    },
    userTel: {
      get() { return this.$store.state.user.tel },
      set(val) { this.$store.commit('user/updateTel', val) }
    },
    userMobile: {
      get() { return this.$store.state.user.mobile },
      set(val) { this.$store.commit('user/updateMobile', val) }
    },
    userDeptId: {
      get() { return this.$store.state.user.deptId },
      set(val) { this.$store.commit('user/updateDeptId', val) }
    },
    userDeptName: {
      get() { return this.$store.state.user.deptName },
      set(val) { this.$store.commit('user/updateDeptName', val) }
    },
    userType: {
      get() { return this.$store.state.user.userType },
      set(val) { this.$store.commit('user/updateUserType', val) }
    }
  },
  created() {
  },
  mounted() {
    this.getUserInfo()
  },
  destroyed() {
  },
  activated() {
  },
  methods: {
    // 获取当前用户
    getUserInfo() {
      this.$http({
        url: this.$http.requestUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.requestParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userId = data.user.userId
          this.userName = data.user.userName
          this.userTel = data.user.tel
          this.userMobile = data.user.mobile
          this.userDeptId = data.user.deptId
          this.userDeptName = data.user.deptName
          this.userType = data.user.userType
          this.initChart1()
          this.initChart2()
          this.initChart3()
          this.initChart4()
        }
      })
    },
    // 统计图
    initChart1() {
      // chart1
      var chart1 = echarts.init(document.getElementById('chart1'))
      chart1.setOption ({
             legend: {
              orient: 'horizontal',
              horizontalAlign: 'top',
              padding: [0, 10, 50, 0],
              y: 'top',
              x: 'right',
              data: ['最高心率', '平均心率'],
              selectedMode: false
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: ['11/22', '11/23', '11/24', '11/25', '11/26', '11/27', '11/28'],
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: { color: '333' }
              },
            },
            yAxis: {
              type: 'value',
              name: '次/分钟',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
            },
            grid: {
              left: '0',
              right: '0',
              bottom: '0',
              top: '10%',
              containLabel: true
            },
            color: ["#4dbdae", "#e47f79"],
            series: [
              {
                name: '最高心率',
                type: 'bar',
                barGap: 0.2,
                barWidth: 12,
                itemStyle: {
                  emphasis: {
                    barBorderRadius: 7
                  },
                  normal: {
                    barBorderRadius: 7
                  }
                },
                emphasis: {
                  focus: 'series'
                },
                data: [90, 97, 98, 93, 102, 110, 96]
              },
              {
                name: '平均心率',
                type: 'bar',
                barWidth: 12,
                itemStyle: {
                  emphasis: {
                    barBorderRadius: 7
                  },
                  normal: {
                    barBorderRadius: 7
                  }
                },
                emphasis: {
                  focus: 'series'
                },
                 data: [80, 87, 88, 83, 92, 90, 86]
              },
            ]
        })
      window.addEventListener('resize', () => {
        this.chart1.resize()
      })
    },
    // 统计图2
    initChart2() {
      var chart2 = echarts.init(document.getElementById('chart2'));
      chart2.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['个人运动强度', '校平均运动强度', '区平均运动强度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7','8','9','10'],
          name: '天'
        },
        yAxis: {
          type: 'value',
        },
         color: ["#4dbdae", "#e47f79", "#f3af5c"],
        series: [
          {
            name: '个人运动强度',
            type: 'line',
            data: [120, 132, 101, 134, 90, 130, 110, 120, 115, 117]
          },
          {
            name: '校平均运动强度',
            type: 'line',
            data: [110, 102, 107, 121, 100, 107, 100, 106, 104, 110]
          },
          {
            name: '区平均运动强度',
            type: 'line',
            data: [101, 90, 119, 110, 95, 101, 107, 109, 100, 106]
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.chart2.resize()
      })
    },
    // 统计图
    initChart3() {
      var chart1 = echarts.init(document.getElementById('chart3'));
      chart1.setOption({
         tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['个人运动强度', '校平均运动强度', '区平均运动强度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7','8','9','10'],
          name: '天'
        },
        yAxis: {
          type: 'value',
          name: '小时/天'
        },
         color: ["#4dbdae", "#e47f79", "#f3af5c"],
        series: [
          {
            name: '个人运动强度',
            type: 'line',
            data: [1.5, 1.2, 1.1, 1.4, 0.9, 1.3, 1.1, 1.2, 1.15, 1.17]
          },
          {
            name: '校平均运动强度',
            type: 'line',
            data: [1.1, 1.02, 1.07, 1.21, 1, 1.07, 1, 1.06, 1.04, 1.1]
          },
          {
            name: '区平均运动强度',
            type: 'line',
            data: [1.01, 0.9, 1.19, 1.1, 0.95, 1.01, 1.07, 1.09, 1, 1.06]
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.chart3.resize()
      })
    },
    // 统计图
    initChart4() {
      var chart4 = echarts.init(document.getElementById('chart4'));
      chart4.setOption({
        tooltip: {
          show: true
        },
        legend: {
          textStyle: {
            color: '#000',
            fontSize: 18
          },
        },
        grid: {
          top: '33px',
          left: '0',
          right: '10px',
          bottom: '0',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,.06)"
            }
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLabel: {
            fontSize: 18,
            color: "rgba(0, 0, 0, 0.25)"
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          max: 20,
          interval: 5,
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLabel: {
            fontSize: 18,
            color: "rgba(0, 0, 0, 0.25)"
          },
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,.06)",
              type: 'solid'
            }
          }
        }],
        series: [{
          type: 'line',
          symbol: 'none',
          data: [9, 7, 6, 12, 8, 6, 11, 19, 18, 16],
          lineStyle: {
            normal: {
              width: 3,
              color: {
                type: 'linear',

                colorStops: [{
                  offset: 0,
                  color: '#fff' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#4DBDAE' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#4DBDAE' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#4DBDAE' // 100% 处的颜色
                }, {
                  offset: 0,
                  color: '#fff' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(77, 189, 174, 0.15)',
              shadowBlur: 3,
              shadowOffsetY: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#fff',
              borderWidth: 10,
              /*shadowColor: 'rgba(72,216,191, 0.3)',
              shadowBlur: 100,*/
              borderColor: "#A9F387"
            }
          },
          smooth: true
        }]
      })
      window.addEventListener('resize', () => {
        this.chart4.resize()
      })
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.requestUrl('/sys/logout'),
          method: 'post',
          data: this.$http.requestData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
